<script setup>
import {inject, watch} from "vue";
import {
  useNode
} from '@vue-flow/core'

const {
  node
} = useNode()

const props = defineProps(['id', 'data'])
const updateNodesData = inject("updateNodesData")
// 监听props.data的变化
watch(() => props.data, (newValue, oldValue) => {
    console.log('props.data changed ', newValue);
    updateNodesData();
}, {
    deep: true
})
</script>

<template>
  <div class="_container">
    <!-- header section -->
    <div class="fx fx-c_center pad-16 header">
      <div class="fx fx-center wh-40 logo">
        <jb-icon :local="true" icon="mynaui:user-waves-solid" width="30" color="#2263c5"></jb-icon>
      </div>
      <div class="ml-10 tc-dark">
        <div>App应用UI设置</div>
        <p class="font-12 tc-assist">设置应用的相关UI配置</p>
      </div>
    </div>

    <!-- form section -->
    <div class="form fx-col pad-16">

      <div class="n-form-item">
        <jb-icon :local="true" icon="fluent-color:heart-16" width="25" color="#2263c5"></jb-icon>
        <span>应用Logo</span>
        <jb-avatar v-model:src="props.data.uiConfig.appLogo"
                   accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                   save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">
        </jb-avatar>
      </div>
      <div class="n-form-item">
        <jb-icon :local="true" icon="fluent-color:options-16" width="25" color="#2263c5"></jb-icon>
        <span>头像展示</span>
        <n-switch v-model:value="props.data.uiConfig.showAvatar" :round="false" size="large">
          <template #checked>展示</template>
          <template #unchecked>隐藏</template>
        </n-switch>
      </div>
      <div v-if="props.data.uiConfig.showAvatar">
        <div class="n-form-item">
          <jb-icon :local="true" icon="fluent-color:person-heart-32" width="25" color="#2263c5"></jb-icon>
          <span>用户头像</span>
          <jb-avatar v-model:src="props.data.uiConfig.userAvatar"
                     accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                     save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">
          </jb-avatar>
        </div>
        <div class="n-form-item">
          <jb-icon :local="true" icon="fluent-color:bot-sparkle-20" width="25" color="#2263c5"></jb-icon>
          <span>AI&nbsp;&nbsp;头像</span>
          <jb-avatar v-model:src="props.data.uiConfig.assistantAvatar"
                     accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                     save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">
          </jb-avatar>
        </div>
      </div>

      <!--      <n-form ref="formRef" label-placement="left"-->
      <!--              label-width="100" require-mark-placement="right-hanging">-->
      <!--        <n-form-item label="应用logo" path="appLogo" class="mb-16">-->
      <!--          <div class="output-flag noshrink"></div>-->
      <!--          <jb-avatar v-model:src="props.data.uiConfig.appLogo"-->
      <!--                     accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"-->
      <!--                     save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">-->
      <!--          </jb-avatar>-->
      <!--        </n-form-item>-->

      <!--        <n-form-item label="头像展示" class="mb-16">-->
      <!--          <n-switch v-model:value="props.data.uiConfig.showAvatar" :round="false" size="large">-->
      <!--            <template #checked>展示</template>-->
      <!--            <template #unchecked>隐藏</template>-->
      <!--          </n-switch>-->
      <!--        </n-form-item>-->

      <!--        <div v-if="props.data.uiConfig.showAvatar">-->
      <!--          <n-form-item label="用户头像" path="userAvatar" class="mb-16">-->
      <!--            <jb-avatar v-model:src="props.data.uiConfig.userAvatar"-->
      <!--                       accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"-->
      <!--                       save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">-->
      <!--            </jb-avatar>-->
      <!--          </n-form-item>-->

      <!--          <n-form-item label="AI头像" path="assistantAvatar" class="mb-16">-->
      <!--            <jb-avatar v-model:src="props.data.uiConfig.assistantAvatar"-->
      <!--                       accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"-->
      <!--                       save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">-->
      <!--            </jb-avatar>-->
      <!--          </n-form-item>-->
      <!--        </div>-->
      <!--      </n-form>-->
    </div>
  </div>
</template>

<style scoped>
._container {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-sizing: border-box;
  width: 260px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

.header {
  border-bottom: 1px solid rgb(229, 231, 235);
}

.logo {
  background: #dce6fc;
  border-radius: 12px;
}

.n-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px; /* 增加表单项间的间距 */
}

/* 改进开关组件的样式 */
.n-switch {
  font-size: 14px;
  line-height: 20px;
}

.mb-16 {
  margin-bottom: 16px;
}

.n-form-item span {
  width: 40%;
  font-size: 16px;
  text-align: center;
  margin-right: 20px;
  margin-left: 10px;
}


</style>